<template>
<!-- <h1>一级导航</h1>-->
<div class="header">
    <el-row>
        <el-col :span="8">
            <div class="grid-content bg-purple">
                <!-- logo -->
                <img src="../assets/images/logo1.png" alt class="logo" />
                <h2 class="title">归途房产</h2>
            </div>
        </el-col>
        <el-col :span="10">
            <div class="grid-content bg-purple-light">
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color="#000" active-text-color="#ffd04b" style="height: 60px">
                    <el-menu-item index="1" @click="changeMenu('1')">
                        我的
                        <!--<router-link :to="{path:'/Home/Homemin',query:{name:1}}">我的</router-link>-->
                    </el-menu-item>
                    <el-menu-item index="2" @click="changeMenu('2')">新房</el-menu-item>
                    <el-menu-item index="3" @click="changeMenu('3')">交易</el-menu-item>
                    <el-menu-item index="4" @click="changeMenu('4')">页面</el-menu-item>
                    <el-menu-item index="5" @click="changeMenu('5')">APP</el-menu-item>
                    <el-menu-item index="6" @click="changeMenu('6')">客服</el-menu-item>
                    <el-menu-item index="7" @click="changeMenu('7')">会员</el-menu-item>
                    <el-menu-item index="8" @click="changeMenu('8')">设置</el-menu-item>
                </el-menu>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <div class="headerUser">
                    <!--设置全屏-->
                    <span class="user" @click="toggleFullScreen">
                        <el-tooltip class="item" effect="dark" :content="isFullScreen?'退出全屏':'全屏'" placement="bottom">
                            <i :class="isFullScreen?'el-icon-aim':'el-icon-full-screen'" style="width: 1.6rem;height: 1.6rem;vertical-align:middle;margin-right: .6rem;margin-bottom: .5rem;font-size:2rem"></i>
                        </el-tooltip>
                    </span>
                    <!--登录者头像-->
                    <img :src="user.admin_icon" alt />
                    <span>{{user.admin_name}}</span>
                    <!--退出登录-->
                    <i class="el-icon-switch-button" @click="backLogin"></i>
                </div>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
import MenuCount from "../store/module/MenuCount";
import loginmodules from "../store/module/login";
import session from "../utils/uitls";
import * as api from "../utils/api";
export default {
    data() {
        return {
            activeIndex2: "1",
            myindex: "",
            user: this.$store.state.loginmodules.user,
            /*设置全屏*/
            browserKernel: "",
            canFullScreen: false,
            isFullScreen: false,
        };
    },
    created() {
        /*在页面初始化时判断浏览器是否支持全屏操作*/
        // 检查浏览器是否支持全屏
        this.canFullScreen =
            document.fullscreenEnabled ||
            document.webkitFullscreenEnabled ||
            document.mozFullScreenEnabled ||
            document.msFullscreenEnabled;
        if (document.webkitFullscreenEnabled) {
            this.browserKernel = "webkit";
        } else if (document.mozFullScreenEnabled) {
            this.browserKernel = "gecko";
        } else if (document.msFullscreenEnabled) {
            this.browserKernel = "trident";
        } else if (document.fullscreenEnabled) {
            this.browserKernel = "others";
        }
        if (this.canFullScreen) {
            this.addFullScreenListener();
        }
    },
    /*最后在销毁页面时移出监听*/
    destroyed() {
        document.onkeydown = null;
        switch (this.browserKernel) {
            case "webkit":
                document.onwebkitfullscreenchange = null;
                break;
            case "gecko":
                document.onmozfullscreenchange = null;
                break;
            case "trident":
                document.onmsfullscreenchange = null;
                break;
            case "others":
                document.onfullscreenchange = null;
                break;
            default:
                break;
        }
    },
    watch: {
        $route: {
            handler(val, oldval) {
                console.log(val.path);
            },
        },
        deep: true,
    },
    methods: {
        handleSelect(key, keyPath) {},
        /*根据vuex里面的数据===切换左侧菜单栏*/
        changeMenu(num) {
            /* console.log(num)*/
            this.activeIndex2 = num;
            this.$store.dispatch("actionChangNum", num);
            // this.$router.push("/Home/Homemin");
            if (num == "1") {
                this.$router.push("/Home/Homemin/Workbench");
            } else if (num == "2") {
                this.$router.push("/Home/Homemin/ReleaseProperty");
            } else if (num == "3") {
                this.$router.push("/Home/Homemin/OrderManage");
            } else if (num == "4") {
                this.$router.push("/Home/Homemin/Workbench");
            } else if (num == "5") {
                this.$router.push("/Home/Homemin/Workbench");
            } else if (num == "6") {
                this.$router.push("/Home/Homemin/Workbench");
            } else if (num == "7") {
                this.$router.push("/Home/Homemin/Member");
            } else if (num == "8") {
                this.$router.push("/Home/Homemin/Permissions");
            }
        },
        /*退出登录*/
        backLogin() {
            // this.session.removeAttribute("user");
            console.log("22222");

            this.axios({
                method: "post",
                url: "/admin/logout",
                data: {},
            }).then((data) => {
                console.log("退出登录返回信息");
                console.log(data);
                sessionStorage.removeItem("user");
                sessionStorage.removeItem("token");
                this.$router.push("/");
            });
        },
        //全屏设置
        toggleFullScreen() {
            if (this.canFullScreen) {
                if (this.isFullScreen) {
                    // 关闭全屏
                    this.exitFullScreen();
                    this.isFullScreen = false;
                } else {
                    // 打开全屏
                    this.requestFullScreen(document.body);
                    this.isFullScreen = true;
                }
            } else {
                this.$message.warning({
                    content: "当前浏览器暂不支持全屏模式，请切换浏览器后重新尝试！",
                    duration: 3,
                });
            }
        },
        requestFullScreen(element) {
            // 判断各种浏览器，找到正确的方法
            const requestMethod =
                element.requestFullScreen || // W3C
                element.webkitRequestFullScreen || // Chrome, safari
                element.mozRequestFullScreen || // FireFox
                element.msRequestFullscreen; // IE11
            if (requestMethod) {
                requestMethod.call(element);
            }
        },
        exitFullScreen() {
            var exitMethod =
                document.exitFullscreen || // W3C
                document.mozCancelFullScreen || // FireFox
                document.webkitExitFullscreen || // Chrome等
                document.msExitFullscreen; // IE11
            if (exitMethod) {
                exitMethod.call(document);
            }
        },
        addFullScreenListener() {
            const self = this;
            document.onkeydown = function (e) {
                if (e && e.keyCode === 122) {
                    // 捕捉F11键盘动作
                    e.preventDefault(); // 阻止F11默认动作
                    self.toggleFullScreen();
                }
            };
            // 监听不同浏览器的全屏事件，并件执行相应的代码
            switch (self.browserKernel) {
                case "webkit":
                    document.onwebkitfullscreenchange = function () {
                        if (document.webkitIsFullScreen) {
                            self.isFullScreen = true;
                        } else {
                            self.isFullScreen = false;
                        }
                    };
                    break;
                case "gecko":
                    document.onmozfullscreenchange = function () {
                        if (document.mozFullScreen) {
                            self.isFullScreen = true;
                        } else {
                            self.isFullScreen = false;
                        }
                    };
                    break;
                case "trident":
                    document.onmsfullscreenchange = function () {
                        if (document.msFullscreenElement) {
                            self.isFullScreen = true;
                        } else {
                            self.isFullScreen = false;
                        }
                    };
                    break;
                case "others":
                    document.onfullscreenchange = function () {
                        if (document.fullscreen) {
                            self.isFullScreen = true;
                        } else {
                            self.isFullScreen = false;
                        }
                    };
                    break;
                default:
                    break;
            }
        },
    },
};
</script>

<style lang="less" scoped>
.logo {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    float: left;
    margin-left: 50px;
    margin-top: 5px;
}

.title {
    width: 300px;
    height: 50px;
    line-height: 60px;
    color: #ffffff;
}

.el-menu {
    background-color: #63b7af;
}

.headerUser {
    height: 60px;
    display: flex;
    justify-content: center;
    font-size: 0;
    vertical-align: middle;

    img {
        background-color: white;
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 40px;
        margin: auto 0;
    }

    span {
        display: inline-block;
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        color: white;
    }

    .el-icon-switch-button {
        width: 40px;
        height: 40px;
        color: white;
        font-size: 20px;
        line-height: 40px;
        margin: auto 0;
    }
}
</style>
